<template>
  <div class="modal-demo">

    <el-dialog
        title="归档课程"
        :visible.sync="dialogVisible"
        width="60%"
        @close="handleClose"
        style="padding: 30px 0"
    >


      <div class="top-container">
        <el-tabs v-model="activeName" @tab-click="handleClick">

          <el-tab-pane label="我学的" name="first">
          </el-tab-pane>
          <el-tab-pane label="我协助的" name="second">
          </el-tab-pane>
          <el-tab-pane label="我教的" name="third">
          </el-tab-pane>
        </el-tabs>
        <el-input
            placeholder="请输入内容"
            class="input-with-select"
            style="width: 200px"
            v-model="searchQuery"
            @keyup.enter="searchClass"
        >
          <el-button
              slot="append"
              icon="el-icon-search"
              style="width: 50px;height: 40px;padding: 0"
              @click="searchClass"
          ></el-button>
        </el-input>
      </div>

      <div class="content-container">
        <div class="semester">
          <el-col :span="24">
            <el-menu
                :default-active="activeSemester"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose1">
              <el-menu-item :index="String(index)" v-for="(item,index) in semesterData" :key="index" @click="selectSemester(item)">
                <span slot="title">{{ item.studySemester }}</span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </div>
        <div class="list-box">
          <div v-if="semesterData.length>0">
            <div class="course-info" v-for="course in selectedCourses" :key="course.id" >
              <el-row>
                <el-col :span="6" class="course-left">
                  <p>加课码 {{course.courseCode }}</p>
                </el-col>
                <el-col :span="17">
                  <div class="course-details">
                    <h3>{{ course.clazz }}</h3>
                    <p>{{ course.courseName }}</p>
                    <p>成员{{ course.student_number }}人</p>
                  </div>
                </el-col>
                <el-col :span="1">
                  <el-dropdown class="more-options" trigger="click" >
                    <i class="el-icon-more"></i>
                    <el-dropdown-menu>
                      <el-dropdown-item><span @click="unPigeonholeClass(course)">恢复</span></el-dropdown-item>
                      <el-dropdown-item v-if="course.type != 1"><span @click="deleteClass(course)">删除</span></el-dropdown-item>
                      <el-dropdown-item v-if="course.type == 1"><span @click="deleteTeachClass(course)">删除</span></el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>
            </div>
          </div>
          <el-empty :image-size="200" v-else></el-empty>

        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getRequest, postRequest} from "@/utils/api";

export default {
  name: 'pigeonholeClass',
  data() {
    return {
      activeSemester:'0',  // 强制设置为第一个菜单项
      type:0,
      id:0,
      tab:0,
      dialogVisible: false,
      searchValue: '',
      courseList: [],
      activeName: 'first',
      semesterData: [],
      selectedCourses: [],
      teachClass: [],
      learnClass: [],
      assistClass: [],
      teachSemesterData: [],
      learnSemesterData: [],
      assistSemesterData: [],
      searchQuery: '', // 新增：搜索关键词
    };
  },
  methods: {
    unPigeonholeClass(course){
      this.unPigeonholeData ={
        courseId:course.id,
        userId:this.id
      }
      postRequest('/userCourse/unPigeonholeClass',this.unPigeonholeData).then(() => {
        this.refreshData()
      })
    },
    deleteClass(course){
      this.deleteData ={
        courseId:course.id,
        userId:this.id
      }
      postRequest('/userCourse/deleteClass',this.deleteData).then(() => {
        this.refreshData()
      })
    },
    deleteTeachClass(course){
      this.deleteData ={
        courseId:course.id,
        userId:this.id
      }
      postRequest('/userCourse/deleteClass',this.deleteData).then(() => {
        this.refreshData()
      })
      postRequest('/userCourse/deleteTeachClass',this.deleteData).then(() => {
        this.refreshData()
      })
    },
    initFirstSemester() {
      if (this.semesterData.length > 0) {
        this.selectSemester(this.semesterData[0]);
        this.activeSemester = '0';
      }
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose1(key, keyPath) {
      console.log(key, keyPath);
    },
    showModal() {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.initFirstSemester();
      });
    },
    handleClose() {
      this.dialogVisible = false;
    },
    handleConfirm() {
      this.dialogVisible = false;
    },
    handleClick(tab) {
      this.tab = tab.index;
      switch (tab.index) {
        case "0":
          this.semesterData = this.learnClass;
          break;
        case "1":
          this.semesterData = this.assistClass;
          break;
        case "2":
            this.semesterData = this.teachClass;
          break;
      }
      // 新增：切换tab后初始化第一个学期
      this.$nextTick(() => {
        this.initFirstSemester();
      });
      this.$forceUpdate()
    },
    getSemesterData() {
      this.semesterData = this.learnClass;
      console.log(this.semesterData)
      // 新增：初始化第一个学期
      this.$nextTick(() => {
        this.initFirstSemester();
      });
    },
    selectSemester(semester) {
      // 根据学期获取课程列表
      console.log(semester)
      this.selectedCourses = semester.courseDTOList;
    },
    getCourseList() {
      this.id = JSON.parse(localStorage.getItem('UserInfo')).id;
      getRequest('/userCourse/getPigeonholeClass', {id: this.id}).then(res => {
        this.courseList = res.data.data;
        const userInfo = JSON.parse(localStorage.getItem('UserInfo'))
        this.teachClass = this.courseList.teachCourseDTOList
        this.learnClass = this.courseList.studyCourseDTOList
        this.assistClass = this.courseList.assistCourseDTOList
        this.type=userInfo.type
        this.getSemesterData()
      });
    },
    searchClass() {
      if (this.searchQuery.trim() === '') {
        this.refreshData();
        return;
      }
      const searchInfo ={
        userId: this.id,
        searchMessage: this.searchQuery
      }
      postRequest('/userCourse/searchPigeonholeClass', searchInfo).then(res => {
        console.log(res)
        this.learnClass = res.data.data.studyCourseDTOList;
        this.assistClass = res.data.data.assistCourseDTOList;
        this.teachClass = res.data.data.teachCourseDTOList;
        this.getSemesterData()
      });

    },
    refreshData() {
      this.getCourseList();
    },
  },

  mounted() {
    this.refreshData()

  }
};
</script>

<style scoped>
.top-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.content-container {
  display: flex;
  height: 480px;
  width: 100%;
  border: 1px solid #e4e7ed; /* 添加边框 */
}

.course-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.course-info{
  font-size: 18px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  color: #333;
  line-height: 24px;
  cursor: pointer;
  margin: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
}
.course-info p {
  margin: 5px 0;
}
.semester {
  flex: 1 1 30%;
  border-right: 1px solid #e4e7ed;
}
.list-box {
  flex: 1 1 70%;
}
.course-info {
  margin: 20px;
}

.course-details {
  padding-left: 20px;
}

.course-details h3 {
  font-size: 1.2em;
  margin-bottom: 5px;
}

.course-details p {
  margin: 5px 0;
}
.course-left{
  background-image: url("https://assets.ketangpai.com/theme/min/01.jpg");
  width: 96px;
  position: relative;
  height: 80px;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Semibold;
  font-weight :600;
  text-align :center;
  color :#fff;
  line-height :24px;
  margin: 20px 16px;
}
.course-left p{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 96px;
  height: 24px;
  background: rgba(0, 0, 0, .4);
}

</style>